<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传</title>
    <script src="../js/axios.js"></script>
    <!-- <script src="/js/axios11.js"></script> -->
</head>
<body>
    <input type="number" id="numsss"   placeholder="输入上传数量,默认为1">
    <button onclick=fnAdd()>添加</button><button onclick="addImagesAll()">批量上传</button>
    <button onclick="DeleAllFn()">清空上传列表</button>
<section id="getListImg">

</section>

<section id="imgsBxo">
    <!-- <form>
        <img src="" alt="" id="img">
        <input type="file" id="avator"/>
        <input type="button" value="上传" class="btn">
    </form> -->

    <!-- <form>
        <img>
        <input type="file" class="avator"/>
        <input type="button" value="上传" class="btn">
        <input type="button" value="删除" class="btn">
    </form> -->       
</section>

<script>
    // 渲染上传的
     getBannerList()
    function getBannerList(){
        axios.get('/mg/api2Get').then((res)=>{
            console.log(res);
        let html = '';
        res.data.forEach(v=>{
            html+=`
        <form>
        <img style="width:100px" src="../${v}" alt="" id="img">
        <input type="button" value="删除" class="btn" onclick="delImg('${v}')">
        </form>`
        })
        getListImg.innerHTML = html;
        })
    }

    // 删除上传的
    function delImg(fileName){
        console.log(fileName);
        axios.post('/mg/api3delImg',{imgName:fileName}).then((res)=>{
            console.log(res);
            if(res.code==1){
                // 重新渲染页面
                getBannerList()
            }else{
                getBannerList()
            }
        })
    }

    function fnAdd(){

     let repeatsse=document.querySelector("input[type='Number']")
            console.log(repeatsse.value);
     repeatsse.value == ''?repeats=1:repeats=repeatsse.value;
            for(let i = 0;i<repeats;i++) {
                console.log('开始');
                console.log(repeats);
        let imgsBxo = document.querySelector("#imgsBxo");
        let forms = document.createElement("form");
        let imgs = document.createElement('img');
        let inputImg = document.createElement("input");
                    inputImg.type = 'file'
        let imputUpload = document.createElement("input");

        let spans = document.createElement('span')
        spans.innerText='待添加';
        imputUpload.type = "button";
        imputUpload.value = "上传";
        let imputDelete = document.createElement("input");
        imputDelete.type = "button";
        imputDelete.value = "删除";
        forms.appendChild(imgs)
        forms.appendChild(inputImg)
        forms.appendChild(spans)
        forms.appendChild(imputUpload)
        forms.appendChild(imputDelete)
        imgsBxo.appendChild(forms)
            }
        addEvern()
    }
    // 添加获取基础的按钮
    function addEvern(){
    let oImg = document.querySelector("#img");

    let oBtn = document.querySelector('.btn')
    let oBtns = document.querySelector(".btns")
    // console.log(oBtns);
    // 单个上传
    let forms = document.querySelectorAll("#imgsBxo form")
        // 循环添加事件

    forms.forEach((v,i,a)=>{
        v.onclick =(e)=>{
            e = e || event
            console.log(e.target.value);
            console.log(e.target)
            console.log(e.target.value==='删除'?true :false);
            console.log(v);
            // console.log(e.target.parentElement());

           switch ( e.target.value) {
            case '删除':
                console.log('点击了删除');
                    v.remove()			
                break;
                return;
            case '上传':
            addImages(i)
            console.log('点击了上传');
                break;
                return
            default:
                break;
                return
           }
        }
    })
    }
    
    function DeleAllFn(){
        let imgsBxo = document.querySelector('#imgsBxo');
        console.log(imgsBxo);
        while (imgsBxo.firstChild) {  
        imgsBxo.removeChild(imgsBxo.firstChild);  
    }  
    }


function addImages(i){
    console.log(i);
        let inputsss = document.querySelectorAll("input[type='file']")
        let imgssss = document.querySelectorAll("img")
        let spans = document.querySelectorAll('span')
       
        if( inputsss[i].value === ''){
            return
        }

        console.log(inputsss);
        console.log(inputsss[i]);
        let formData = new FormData();
        // console.log(formData);
        console.log(inputsss[i].files);
        formData.append("avator",inputsss[i].files[0]);
        // console.log(formData);
        axios.post("/mg/api1",formData).then((resData)=>{console.log(resData)
            console.log(resData.data);
            if (resData.data.coode === 1) {

                imgssss[i].src =  '../' +resData.data.data.filename + resData.data.extName;
                spans[i].innerText = '上传成功'
            }else{
                imgssss[i].src = '';
                imgssss[i].alt = '文件上传失败';  
                spans[i].innerText = '上传失败'
            }

        }) 
}









    // 批量上传 未实现
    function addImagesAll(){
        alert('未实现')
        return
        let formData = new FormData();
        let ipuntImgS = document.querySelectorAll("input[type='file']")
        ipuntImgS.forEach((v,i)=>{
            console.log(v.files);
            formData.append("avator"+i,v.files[0]);
        })
        // console.log(avator.files);
        // 
        // console.log(formData);
        axios.post("abccc",formData).then((resData)=>{console.log(resData)
            // oImg.src = resData.data.data.filename + resData.data.extName;
        }) 
    }


</script>

</body>
</html>